<template>
        <div class="f-c-c h100">
                <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
                        status-icon>
                        <el-form-item prop="account">
                                <!-- 要处理label就用template，比如改字体颜色，否则可以直接用from自带的label -->
                                <template #label>
                                        <div>账号名</div>
                                </template>
                                <el-input placeholder="请输入账号" v-model="ruleForm.account" />
                        </el-form-item>
                        <el-form-item prop="password">
                                <template #label>
                                        <div>密码</div>
                                </template>
                                <el-input placeholder="请输入密码" v-model="ruleForm.password" />
                        </el-form-item>
                        <el-form-item label="角色" prop="userGroup">
                                <el-select v-model="ruleForm.userGroup" placeholder="请选择角色">
                                        <el-option label="超级管理员" value="超级管理员" />
                                        <el-option label="普通管理员" value="普通管理员" />
                                </el-select>
                        </el-form-item>
                        <el-form-item>
                                <el-button type="primary" @click="submitForm(ruleFormRef)">
                                        登录
                                </el-button>
                        </el-form-item>
                </el-form>
        </div>
</template>
        
<script setup lang='ts'>
import { reactive, ref } from 'vue'
import type { FormInstance } from 'element-plus'
import { FormRules, ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
// import request from '../utils/request'
import { addAccountApi } from '../../apis/users.ts'
// 路由
const router = useRouter()
// 登录表单的TS要求格式
const ruleFormRef = ref<FormInstance>()
// 与登录的表单双向绑定
const ruleForm = reactive({
        account: '',
        password: '',
        userGroup: '普通管理员'
})
const loading = ref(false)

const rules = reactive<FormRules>({
        account: { required: true, message: "请输入账号名" },
        password: { required: true, message: "请输入密码" },
        userGroup: { required: true, message: "请选择角色" },
})

const submitForm = async (formEl: FormInstance | undefined) => {
        if (!formEl) return
        await formEl.validate((valid, fields) => {
                if (valid) {
                        console.log('submit!', ruleForm)
                        loading.value = true
                        addAccountApi(ruleForm)
                                .then(res => {
                                        console.log('res', res);
                                        //重置表单
                                        formEl.resetFields();
                                        ElMessage.success('添加成功')

                                }).catch(err => {
                                        console.log("err", err);
                                        loading.value = false;
                                })
                } else {
                        console.log('error submit!', fields)
                }
        })
}

</script>
        
<style></style>